<template>
  <div class="header-wrapper">
    <div class="logo-wrapper">
       <div class="logo-bg"></div>
      <!--<img class="mylogo" src="https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLRCZUOeCoWxrjGUrhTVFuvVLKRz08BUM6Y88qy8SxGuBDBKT97rRrYyXyrSNb2Exeuf6YXgVyreQ/132" alt="">-->
    </div>
    <el-dropdown @command="userActions">
      <span class="el-dropdown-link">
        {{ user }}
        <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <!--<el-dropdown-item command="setting">个人信息</el-dropdown-item>-->
        <el-dropdown-item command="repassword">设置密码</el-dropdown-item>
        <el-dropdown-item divided command="signout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!--<el-dialog width="30%" :modal-append-to-body="false" :append-to-body="true" title="个人设置" :visible.sync="dSettingVisible">-->
      <!--<el-form :model="setting">-->
        <!--<el-form-item label="姓名">-->
          <!--<el-input auto-complete="off"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="dSettingVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="updateSetting">确 定</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->
    <el-dialog width="30%" :modal-append-to-body="false" title="修改密码" :append-to-body="true" :visible.sync="dRepasswordVisible">
      <el-form :model="repassword">
        <el-form-item label="原密码">
          <el-input v-model="repassword.origin" type="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="repassword.newPassword" type="password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="repassword.confirmation" type="password" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dRepasswordVisible = false">取 消</el-button>
        <el-button type="primary" @click="update_password">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped="">
.logo-wrapper {
  margin-left: 0px;
  width: 100px;
}
.mylogo {
  width: 70px;
  height: 70px;
  border-radius: 35px;
}

</style>
<script>
export default {
  data() {
    return {
      repassword: {},
      dSettingVisible: false,
      dRepasswordVisible: false
    };
  },
  computed: {
    setting() {
      return JSON.parse(
        JSON.stringify(Object.assign({}, this.$store.state.user.me))
      );
    },
    user() {
      return this.$store.state.user.me.display_name || 'admin'
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    userActions(command) {
      switch (command) {
        case "signout":
          this.$store.dispatch("signout");
          break;
        case "setting":
          this.dSettingVisible = true;
          break;
        case "repassword":
          this.repassword = {};
          this.dRepasswordVisible = true;
          break;
        default:
          break;
      }
    },
    updateSetting() {
      let params = {};
      params.id = this.setting.user.id;
      params.name = this.setting.user.name;
      this.$store.dispatch("update_setting", params).then(ret => {
        if (ret.success) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success"
          });
          this.dSettingVisible = false;
        } else {
          this.$notify({
            title: "失败",
            message: ret.message,
            type: "error"
          });
        }
      });
    },
    update_password() {
      if (this.repassword.newPassword != this.repassword.confirmation) {
        this.$notify({
          title: "错误",
          message: "两次输入的密码不一样",
          type: "error"
        });
        return;
      }

      let params = {
        id: 3,
        password: this.repassword.newPassword
      }

      this.$store.dispatch("updateManagerPass", params).then((ret) => {
        if(ret.success) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success"
          });
          this.dRepasswordVisible = false;
        }else{
          this.$notify({
            title: "失败",
            message: ret.message,
            type: "error"
          });
        }
      })

    }
  }
};
</script>

<style lang="css">
.header .el-dropdown {
  color: #000;
}
</style>
